<template>
    <div class="category-container">
        <van-search placeholder="请输入搜索关键词" @focus="handle_focus" />
        <!-- 一级导航 -->
        <Nav1 @select="handle_select" />
        <main>
            <!-- 二级导航 -->
            <van-sidebar v-model="index" class="sidebar">
                <van-sidebar-item
                    v-for="(item, i) in nav_list"
                    :title="i === 0 ? '全部' : item"
                    :key="item"
                    @click="type = item"
                />
            </van-sidebar>
            <div class="filter">
                <span
                    :class="{ active: active_index === 0 }"
                    @click="handle_sort(0)"
                    >综合
                </span>
                <span
                    :class="{ active: active_index === 1 }"
                    @click="handle_sort(1)"
                    >销量
                </span>
                <span
                    :class="{ active: active_index === 2 }"
                    @click="handle_sort(2)"
                >
                    价格
                    <van-icon
                        :name="sort === 'price-up' ? 'arrow-up' : 'arrow-down'"
                    />
                </span>
                <van-divider style="margin: 7px 0" />
                <GoodsList :type="type" :sort="sort" />
            </div>
        </main>
    </div>
</template>

<script>
import Nav1 from "@/components/Nav1"
import { get_nav } from "@/api"
import GoodsList from "@/components/GoodsList.vue"

export default {
    created() {
        this.handle_select("时令水果")
    },
    components: {
        Nav1,
        GoodsList
    },
    data() {
        return {
            index: 0,
            nav_list: [],
            type: null,
            active_index: 0,
            sort: "all"
        }
    },
    methods: {
        handle_focus() {
            this.$router.push({ name: "Search" })
        },
        handle_select(nav) {
            get_nav({ type: nav }).then((resp) => {
                this.index = 0
                this.nav_list = resp
                this.type = resp[0]
            })
        },
        handle_sort(index) {
            this.active_index = index
            if (index === 0) {
                this.sort = "all"
            } else if (index === 1) {
                this.sort = "sale"
            } else {
                this.sort = this.sort === "price-up" ? "price-down" : "price-up"
            }
        }
    }
}
</script>

<style lang="less">
@import url(~@/assets/css/var.less);
.category-container {
    main {
        display: flex;
        margin-bottom: 50px;
        .sidebar {
            flex: 0 0 auto;
            width: 80px;
            background-color: #f7f8fa;
            min-height: calc(100vh - 184px);
            .van-sidebar-item {
                padding: 10px 10px;
            }
        }
        .filter {
            text-align: right;
            > span {
                color: @secondary;
                margin: 0 10px;
                font-weight: 600;
                &.active {
                    color: #ff1a90;
                }
            }
        }
    }
}
</style>
